<template>
  <div>
    <!-- 添加弹出框 -->
    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="700">
      <el-form :model="addform">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input
            v-model="addform.name"
            style="width: 240px"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="addform.gender">
            <el-radio value="男">男</el-radio>
            <el-radio value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input
            v-model="addform.phone"
            style="width: 240px"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          el-form-item
          label="身份证号"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="addform.idcard"
            style="width: 240px"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item el-form-item label="联系人" :label-width="formLabelWidth">
          <el-input
            v-model="addform.emname"
            style="width: 240px"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input
            v-model="addform.emphone"
            style="width: 240px"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="联系关系" :label-width="formLabelWidth">
          <el-select
            v-model="addform.emrelation"
            style="width: 240px"
            placeholder="紧急联系人与客户关系"
          >
            <el-option label="子女" value="子女" />
            <el-option label="祖孙" value="祖孙" />
            <el-option label="叔侄" value="叔侄" />
            <el-option label="朋友" value="朋友" />
          </el-select>
        </el-form-item>
        <el-form-item label="服务地址" :label-width="formLabelWidth">
          <el-input
            v-model="addform.addr"
            style="width: 240px"
            autosize
            type="textarea"
            placeholder="Please input"
          />
        </el-form-item>
        <el-form-item label="个人病史" :label-width="formLabelWidth">
          <el-input
            v-model="addform.disease"
            style="width: 240px"
            autosize
            type="textarea"
            placeholder="Please input"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="add"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 查询表单 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      label-width="90"
    >
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="姓名" clearable />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="formInline.phone" placeholder="手机号" clearable />
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="formInline.age" placeholder="年龄" clearable />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="formInline.gender" placeholder="请选择" clearable>
          <el-option label="请选择" value="" :disabled="true" />
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="会员等级">
        <el-select v-model="formInline.level" placeholder="请选择" clearable>
          <el-option label="请选择" value="" :disabled="true" />
          <el-option label="初级会员" value="初级会员" />
          <el-option label="中级会员" value="中级会员" />
          <el-option label="高级会员" value="高级会员" />
        </el-select>
      </el-form-item>
      <el-form-item label="服务地址">
        <el-input v-model="formInline.addr" placeholder="服务地址" clearable />
      </el-form-item>
      <el-form-item label="" required>
        <el-col :span="11">
          <el-form-item prop="date">
            <el-date-picker
              v-model="formInline.createtime1"
              type="date"
              aria-label="Pick a date"
              placeholder="注册时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col class="text-center" :span="2">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-form-item prop="date">
            <el-date-picker
              v-model="formInline.createtime2"
              type="date"
              aria-label="Pick a date"
              placeholder="注册时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label-width="50px">
        <el-button type="primary" @click="getAll">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="create">创建</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="" @click="clear">清空</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="deletebatch">删除</el-button>
      </el-form-item>
    </el-form>
    <!-- 展示数据 -->
    <el-table
      :data="pageBean.records"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="30" />
      <el-table-column prop="name" label="姓名" width="100" align="center" />
      <el-table-column prop="gender" label="性别" width="100" align="center" />
      <el-table-column prop="age" label="年龄" width="100" align="center" />
      <el-table-column prop="phone" label="手机号" width="130" align="center" />
      <el-table-column
        prop="idcard"
        label="身份证号"
        width="180"
        align="center"
      />
      <el-table-column
        prop="addr"
        label="服务地址"
        width="180"
        align="center"
      />
      <el-table-column
        prop="createtime1"
        label="注册时间"
        width="150"
        align="center"
      />
      <el-table-column prop="level" label="会员等级" width="120" align="center">
        <template #default="scope">
          <el-tag
            :type="
              scope.row.level === '初级会员'
                ? 'primary'
                : scope.row.level === '中级会员'
                ? 'success'
                : scope.row.level === '高级会员'
                ? 'warning'
                : 'danger'
            "
            plain
            disable-transitions
          >
            {{ scope.row.level }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row.acid)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 展示页码 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[2, 5, 8]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import axios from "axios";
import { onMounted } from "vue";
import { ElMessage } from "element-plus";
import { ElTable } from "element-plus";

const pageBean = reactive({});
let currentPage = ref(1);
let pageSize = ref(5);

let formInline = reactive({});
const dialogFormVisible = ref(false);
let dialogTitle = ref("");
const formLabelWidth = "80px";
// 添加对话框
let addform = reactive({});
let editform = ({});
onMounted(() => {
  getAll();
});
// 多选框
let multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  val.forEach((row) => {
    multipleSelection.value.push(row.acid);
  });
};
// 编辑
const handleEdit = (customer) => {
  dialogFormVisible.value = true;
  editform = customer;
  addform = editform;
  dialogTitle.value = "编辑客户";
};
// 添加
const create = () => {
  addform = reactive({});
  dialogFormVisible.value = true;
  dialogTitle.value = "创建客户";
};
// 删除
const handleDelete = (acid) => {
  axios.post("/sys/delete/" + acid).then((resp) => {
    console.log(resp.data);
    ElMessage({ message: "删除成功", type: "success" });
    getAll();
  });
};
// 批量删除
const deletebatch = () => {
  axios.post("/sys/deletebatch", multipleSelection.value).then((resp) => {
    console.log(resp.data);
    ElMessage({ message: "删除成功", type: "success" });
    getAll();
  });
};
// 清空
const clear = () => {
  Object.keys(formInline).forEach((key) => {
    formInline[key] = null;
  });
  currentPage = ref(1);
  pageSize = ref(2);
  getAll();
};
// 创建
const add = () => {
  if (dialogTitle.value == "创建客户") {
    axios.post("/sys/add", addform).then((resp) => {
      if (resp.data.code == 200) {
        dialogFormVisible.value = false;
        addform = reactive({});
        ElMessage({ message: "创建成功", type: "success" });
        getAll();
      }
    });
  }else if(dialogTitle.value == "编辑客户"){
    axios.post("/sys/update", addform).then((resp) => {
      if (resp.data.code == 200) {
        dialogFormVisible.value = false;
        addform = reactive({});
        ElMessage({ message: "修改成功", type: "success" });
        getAll();
      }
    });
  }
};
const onSubmit = () => {
  console.log("submit!");
};
// 获取全部
function getAll() {
  axios
    .post(`/sys/getall/${currentPage.value}/${pageSize.value}`, formInline)
    .then((resp) => {
      if (resp.data.code == 200) {
        console.log(resp.data.data);
        Object.assign(pageBean, resp.data.data);
        console.log(Date.now());
      }
    });
}
// 分页
function handleSizeChange(val) {
  console.log(`每页 ${val} 条`);
  //  重新查询
  pageSize.value = val;
  getAll();
}
function handleCurrentChange(val) {
  console.log(`当前页: ${val}`);
  //  重新查询
  currentPage.value = val;
  getAll();
}
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>